<template>
    <view class="send-box" :style="{ bottom: inputHeight + 'px' }">
        <view class="flex-row input-box">
            <!-- <input
        :adjust-position="false"
        class="input"
        v-model="commentParams.content"
        type="text"
        placeholder="欢迎参与评论"
        ref="inputREF"
        style="flex: 1 0 0"
      /> -->

            <fui-input
                size="26"
                :padding="[0, 0, 0, 0]"
                :placeholder="placeholder"
                :adjustPosition="false"
                :borderBottom="false"
                :focus="isFocus"
                ref="inputREF"
                @blur="blurFn"
                v-model="commentParams.content"
            ></fui-input>
            <view class="send" @click="pushComment">发送</view>
        </view>
        <fui-safe-area></fui-safe-area>
    </view>
</template>

<script lang="ts" setup>
import { addPostCommentAPI } from '@/api/posts'

const emit = defineEmits(['reGetData'])

const props = defineProps({
    // 绑定的id
    bindId: {
        type: String,
        default: ''
    },
    type: {
        // 评论类型  1. 产品 2,视频 3.帖子
        type: String,
        default: '3'
    }
})

const screenWidth = ref<number>(0)
const inputHeight = ref<number>(0)

const inputREF = ref()
const isFocus = ref(false)
const sendKeyboard = ref<any>(null)
const blurFn = () => {
    isFocus.value = false
    placeholder.value = '欢迎参与评论'
    // commentParams.pid = ''
    // console.log('失去焦点')
}

interface ICommentParams {
    content?: string
    pic?: string
    pid?: string
    isAnonymous?: boolean
    bindId: string
    type: string | number
    toId?: string
    toUid?: string
}
const placeholder = ref('欢迎参与评论')

// 提交参数

const commentParams = reactive<ICommentParams>({
    pic: '',
    isAnonymous: false, // 是否匿名
    content: '', // 内容
    pid: '', // 是否有父级id  没有的话为  "0"
    bindId: '', // 绑定的id
    type: 3 // 类型 : 1 产品 2,视频 3.帖子
})

// watchEffect(() => {
// })

const clickComment = ref<any>({})

// 聚焦事件
const focusFn = (e) => {
    // console.log('聚焦')
    clickComment.value = e
    placeholder.value = '回复@' + e.userNickname
    console.log('聚焦111', commentParams, e)

    isFocus.value = true
}

onLoad(() => {
    uni.$on('inpFocus', (e) => {
        focusFn(e)
        // clickComment.value = e
        // placeholder.value = '回复@' + e.userNickname
        // console.log('聚焦111', commentParams, e)
        //
        // isFocus.value = true
    })
})

onUnload(() => {
    uni.$off('inpFocus')
})

const pushComment = async () => {
    console.log(clickComment.value)
    if (!commentParams.content)
        return uni.showToast({
            title: '评论内容不能为空',
            icon: 'none'
        })
    commentParams.bindId = props.bindId
    commentParams.pid = clickComment.value.id
    //     clickComment.value!.pid === '0' ? clickComment.value.id : clickComment.value.pid
    // commentParams.toUid = clickComment.value!.toUid || ''
    // commentParams.toId = clickComment.value!.id || ''
    commentParams.type = props.type
    const res = await addPostCommentAPI(commentParams)

    if (res.code === 0) {
        // 关闭键盘
        uni.hideKeyboard()
        // 清空内容
        commentParams.content = ''
        commentParams.pid = ''
        commentParams.bindId = ''
        clickComment.value = {}
        // 刷新列表
        // uni.$emit('refreshCommentList')
        emit('reGetData')
    } else {
        uni.showToast({
            title: res.msg,
            icon: 'none'
        })
    }
}
defineExpose({
    focusFn
})

onMounted(() => {
    uni.getSystemInfo({
        success: (e) => {
            screenWidth.value = e.screenWidth
        }
    })
    // #ifndef H5

    sendKeyboard.value = uni.onKeyboardHeightChange((res) => {
        console.log(res.height)
        inputHeight.value = res.height
    })
    // #endif
})
// #ifndef H5
onBeforeUnmount(() => {
    console.log('页面离开，取消监听键盘高度')
    uni.offKeyboardHeightChange(sendKeyboard.value)
})
// #endif
</script>

<style lang="scss" scoped>
.send-box {
    position: sticky;
    z-index: 1;

    bottom: 0;
    left: 0;
    transition: all 0.1s ease;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    background-color: #fff;
    .input-box {
        padding: 30rpx;
    }
    .send {
        background: #376af7;
        padding: 10rpx 30rpx;
        border-radius: 999rpx;
        color: #fff;
    }
}
</style>
